<template>
  <BasicTable @register="registerTable">
    <template #action="{ record }">
      <TableAction :actions="tableActions(record)" />
    </template>
    <template #toolbar>
      <Button preIcon="ic:outline-add" type="primary" :onClick="createUserClick">创建用户</Button>
      <!-- <a-button type="primary"> <Icon icon="ic:outline-add" /> 创建用户</a-button> -->
    </template>
  </BasicTable>
  <BasicDrawer @register="registerDrawer">
    <BasicForm
      :labelWidth="100"
      :schemas="formSchemas"
      :actionColOptions="{ span: 24 }"
      :submitButtonOptions="{
        title: '哈哈',
        shape: 'round',
      }"
      @submit="handleSubmit"
    />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, BasicColumn, TableAction, ActionItem } from '/@/components/Table';
  import { BasicForm, FormSchema } from '/@/components/Form';
  import { Button } from '/@/components/Button';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import { getUserListApi, deleteUserApi } from '/@/api/systemManage/user';
  import { ref } from 'vue';

  const page = ref(1);
  const pageSize = ref(3);

  // 表格 action 列
  const tableActions = (record: any): ActionItem[] => {
    return [
      {
        icon: 'ic:outline-edit',
        tooltip: '编辑',
        onClick: editClick.bind(null, record),
        auth: 'admin',
      },
      {
        icon: 'ic:outline-delete-outline',
        color: 'error',
        tooltip: '删除',
        auth: 'admin',
        popConfirm: {
          title: '是否删除',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  };

  // 查询表单
  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '用户名',
      labelWidth: 80,
      colProps: {
        span: 8,
      },
      defaultValue: '',
      componentProps: {
        placeholder: '请输入用户名',
        onChange: (e) => {
          console.log(e);
        },
      },
    },
  ];

  const columns: BasicColumn[] = [
    { title: '用户名', dataIndex: 'userName', key: 'userName', width: 150, align: 'left' },
    { title: '姓名', dataIndex: 'fullName', key: 'fullName', width: 150, align: 'left' },
    { title: 'ID', dataIndex: 'id', key: 'id', align: 'left' },
  ];

  const formSchemas: FormSchema[] = [
    {
      field: 'field',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 16,
      },
      defaultValue: '',
      componentProps: {
        placeholder: '自定义placeholder',
        onChange: (e) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 16,
      },
      defaultValue: '',
      componentProps: {
        placeholder: '自定义placeholder',
        onChange: (e) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 16,
      },
      defaultValue: '',
      componentProps: {
        placeholder: '自定义placeholder',
        onChange: (e) => {
          console.log(e);
        },
      },
    },
  ];

  const [registerTable] = useTable({
    title: '用户列表',
    api: getUserListApi,
    searchInfo: {
      page: page.value,
      size: pageSize.value,
    },
    columns: columns,
    useSearchForm: true,
    formConfig: {
      schemas,
    },
    size: 'small',
    bordered: false,
    actionColumn: {
      align: 'left',
      width: 130,
      dataIndex: 'action',
      className: 'action-column',
      slots: { customRender: 'action' },
    },
    pagination: true,
  });

  const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();

  function handleSubmit(a, b) {
    console.log(a, b);
  }

  function editClick(rowData: any): void {
    setDrawerProps({
      width: '40%',
      title: '编辑用户信息',
    });
    openDrawer(true, {
      isCreate: false,
      data: rowData,
    });
  }

  // 创建用户
  const createUserClick = () => {
    setDrawerProps({
      width: '40%',
      title: '添加用户',
    });
    openDrawer(true, {
      isCreate: true,
    });
  };

  async function handleDelete(record: Recordable) {
    await deleteUserApi(record.id);
  }
  // function handleOpen(record: Recordable) {
  //   console.log('点击了启用', record);
  // }
</script>
